<template>
  <div class="pagination">
    <div class="pages" v-if="pages > 1">
      <a
        href="javascript:void(0);"
        class="item prev"
        :class="{ default: value <= 1 }"
        @click="changePage(value - 1)"
        >{{$t('pagination.previousPage')}}</a
      >
      <div v-for="(item, index) in rainbow" :key="index">
        <a
          href="javascript:void(0);"
          @click="changePage(item)"
          class="item"
          :class="{ cur: value == item }"
          v-if="item !== '...'"
          >{{ item }}</a
        >
        <span class="ellipsis" v-else>...</span>
      </div>
      <a
        href="javascript:void(0);"
        class="item next"
        :class="{ default: value > pages - 1 }"
        @click="changePage(Number(value) + 1)"
        >{{$t('pagination.nextPage')}}</a
      >
      <div class="go-page">
        {{$t('pagination.goTo')}}
        <input
          type="text"
          class="page-input"
          v-model.number="goCurrent"
          @input="goCurrent = Number($event.target.value.replace(/\D+/, ''))"
        />{{$t('pagination.page')}}
        <a
          href="javascript:void(0);"
          @click="changePage(goCurrent)"
          class="page-btn"
          >GO</a
        >
      </div>
      <div class="total-num">
        {{$t('pagination.total')}}
        <span class="num">{{ pages }}</span
        >{{$t('pagination.page')}}
      </div>
    </div>
  </div>
</template>

<script>
import PageUtil from '~/plugins/pageUtil'
export default {
  data () {
    return {
      goCurrent: '',
    }
  },
  props: {
    value: {
      default: 1,
      type: [Number, String]
    },
    pages: {
      default: 1,
      type: Number
    },
    // 每屏展示的页数
    displayCount: {
      default: 5,
      type: Number
    },
  },
  computed: {
    rainbow () {
      return PageUtil.rainbowWithDot(this.value, this.pages, 5)
    }
  },
  methods: {
    changePage (current) {
      if (current == '' || current == 0) {
        this.goCurrent = ''
        return
      }
      current = parseInt(current)
      if (current > this.pages && this.pages) {
        this.$message({
          message: '页面共 ' + this.pages + ' 页',
          type: 'warning',
          duration: 1000,
        })
        this.goCurrent = ''
        return
      }
      if (current < 1) {
        return
      }
      this.$emit('input', current)
      this.$emit('changePage', current)
      this.goCurrent = ''
    }
  }
}
</script>

<style scoped>
</style>
